<template>
  <div vb-loading='loading' class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <tree-tools :node-data="company" :is-root= 'true' @addDepart="addDepart"/>
        <hr>
        <!-- 树状菜单 -->
        <el-tree :data="list"
        :props="defaultProps"
        default-expand-all
        >
          <template v-slot="{ data }">
            <tree-tools
             :node-data="data"
             @getDpmList='getList'
            @addDepart="addDepart"
            @editDepart='editDepart'

            />
          </template>
        </el-tree>
      </el-card>
       <add-dept :show-dialog.sync="showDialog"  :node='nodeDataList'  @getList="getList" ref='add'></add-dept>
    </div>
  </div>

</template>

<script>
import TreeTools from "./common/TreeTools"
import AddDept from './common/AddDept'
import { getDpmList } from '@/api/departments'
import { listToTree } from '@/utils/index'
export default {
   components: {
            TreeTools,
            AddDept
          },

  data() {
    return {
      // 控制添加部门显示隐藏
      showDialog: false,
      // 使用空对象获取部门列表
      list: [
      ],

      defaultProps: {
        label: "name",
        children: "children",
      },
      company: {
        name:'',
        manager: '负责人',
        id:''
      },
      // 页面加载loading显示隐藏
      loading: false,
      nodeDataList: {}
    };
  },
  created() {
    this.getList()
  },
  methods:{
    // 发送请求获取部门列表数据
    async getList(){
      const res = await getDpmList()
      this.list = listToTree(res.depts)
      this.company.name=res.companyName
      loading: false
    },

    // 增加子部门显示显示隐藏
   addDepart(nodeData){
      this.showDialog= true
      this.nodeDataList = nodeData
    },
    // 编辑部门显示，隐藏
    editDepart(nodeData){
      this.showDialog = true
      this.nodeDataList = nodeData
      this.$refs.add.form = nodeData
       this.$refs.add.getDepartDetail(nodeData.id)
    }
  }

};
</script>

<style lang ='scss' scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
#row {
  width: 100%;
}
</style>
